<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="partnerform1"
      ref="partnerform1"
      class="demo-form-inline"
    >
      <el-form-item label="订单编号">
        <el-input v-model="partnerform1.name" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="开始日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <el-table :data="partnerList">
        <!-- 放置列 -->
        <el-table-column
          prop="index"
          align="center"
          width="100px"
          label="序号"
        />
        <el-table-column prop="orderNo" align="center" label="订单编号" />
        <el-table-column prop="skuName" align="center" label="商品名称" />
        <el-table-column prop="price" align="center" label="订单金额（元）" />
        <el-table-column prop="innerCode" align="center" label="设备编号" />
        <el-table-column  align="center" label="订单状态">
           <template v-slot="{ row }">
            {{ row.status}}
          </template>
        </el-table-column>
        <el-table-column  align="center" label="订单日期" sortable>
         <template v-slot="{ row }">
            {{ row.createTime.replace("T", " ") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="details(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <!-- 放置分页组件 -->
        <el-row
          v-if="this.totalpage > 1"
          type="flex"
          style="height: 60px"
          align="middle"
          justify="space-between"
        >
          <el-col :span="12"
            ><span style="font-size: 13px; color: #999; padding-left: 12px"
              >共{{ totalcount }}条记录 第{{ pageParams.pageIndex }}/{{
                totalpage
              }}页</span
            ></el-col
          >
          <el-col :push="12">
            <el-button-group>
              <el-button
                type="primary"
                @click="innPage"
                size="mini"
                :disabled="pageParams.pageIndex == 1"
                icon="el-icon-arrow-left"
                style="
                  background-color: #d5ddf8;
                  color: #000;
                  margin-right: 12px;
                  border: none;
                "
                >上一页</el-button
              >
              <el-button
                type="primary"
                @click="addPage"
                size="mini"
                :disabled="pageParams.pageIndex == this.totalpage"
                style="background-color: #d5ddf8; color: #000; border: none"
                >下一页<i class="el-icon-arrow-right el-icon--right"></i
              ></el-button>
            </el-button-group>
          </el-col>
        </el-row>
    </div>
<!-- 查看详情的dialog -->
 <el-dialog title="工单详情" :visible="showAreadetails" @close="showAreadetails=false">
      <el-row
        class="header"
        v-if="nodelist.status == 3"
        type="flex"
        justify="end"
        align="middle"
      >
        <el-col :span="4" :push="2">
          <i class="el-icon-warning" style="font-size: 20px"></i>
          <span style="font-size: 16px">取消</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
            alt=""
          />
        </el-col>
      </el-row>
      <el-row
        class="header"
        v-if="nodelist.status == 1"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="4" :push="2"
          ><i style="font-size: 20px" class="el-icon-time"></i>
          <span style="font-size: 16px">待办</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_1.834b274c.png"
            alt=""
        /></el-col>
      </el-row>
      <el-row
        class="header"
        v-if="nodelist.status == 4"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="4" :push="2"
          ><i style="font-size: 20px" class="el-icon-success"></i>
          <span style="font-size: 16px">完成</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_4.3b5af41c.png"
            alt=""
        /></el-col>
      </el-row>
      <el-row
        class="header"
        v-if="nodelist.status == 2"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="4" :push="2"
          ><i style="font-size: 20px" class="el-icon-run"></i>
          <span style="font-size: 16px">进行</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_2.3b5af41c.png"
            alt=""
        /></el-col>
      </el-row>
      <!--  待办-->
      <!--  完成-->
      <div class="body">
        <div class="single">
          <span
            >设备编号：<span>{{ nodelist.innerCode }}</span></span
          >
        </div>
        <div class="single">
          <span
            >创建日期：<span>{{ nodelist.createTime }}</span></span
          >
        </div>
        <div
          class="single"
          v-if="nodelist.status == 4 || nodelist.status == 3"
        >
          <span v-if="nodelist.status == 4"
            >完成日期：<span>{{ nodelist.updateTime }}</span></span
          >
          <span v-if="nodelist.status == 3"
            >取消日期：<span>{{ nodelist.updateTime }}</span></span
          >
        </div>
        <div class="single">
          <span
            >运营人员：<span>{{ nodelist.userName }}</span></span
          >
        </div>
        <div class="single">
          <span
            >工单类型：<span>{{
              nodelist.productTypeId == 2 ? "补货工单" : "维修工单"
            }}</span></span
          >
        </div>
        <div class="single">
          <span>补货数量：<span style="color: #85a1ff">补货详情</span></span>
        </div>
        <div class="single">
          <span
            >工单方式：<span>{{
              nodelist.createType == 1 ? "手动" : "自动"
            }}</span></span
          >
        </div>
        <div class="single">
          <span v-if="nodelist.status == 3"
            >取消原因：<span>{{ nodelist.desc }}</span></span
          >
          <span v-else
            >备注：<span>{{ nodelist.desc }}</span></span
          >
        </div>
        <div class="single" v-if="nodelist.status == 1"></div>
      </div>
    </el-dialog>
<!-- dialog结束 -->


  </div>
</template>
<script>
import { getorderlist } from "@/api/order";
export default {
  name: "Order",
  components: {},
  data() {
    return {
      showAreadetails: false,
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      partnerform1: {
        name: "",
      },
      nodelist: {},
      partnerList: [],
      startDate: "",
      endDate: "",
    };
  },
  async created() {
    this.getorderlist();
  },
  methods: {
    async getorderlist() {
      const res = await getorderlist(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.partnerform1.name,
        this.startDate,
        this.endDate
      );
      this.partnerList = res.currentPageRecords;
      this.totalpage = res.totalPage;
      this.totalcount = res.totalCount;
      this.partnerList.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
    },
    innPage(){
      this.pageParams.pageIndex--
    this.getorderlist()},
     addPage(){
      this.pageParams.pageIndex++
    this.getorderlist()},
    search() {
      this.pageParams.pageIndex=1
      this.getorderlist();
    },
    async details(row) {
      // console.log(row);
      this.nodelist = row;
      this.showAreadetails = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  .dialog-footer {
    margin-top: -30px;
  }
  .area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .title {
    width: 50%;
    margin-bottom: 20px;
    .right {
      width: 80%;
      margin-left: 10px;
      .el-table {
        margin-top: -15px;
      }
    }
  }
}
.header {
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
}
.body {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  justify-content: space-evenly;
  align-content: center;
  .single {
    width: 50%;
    height: 20px;
    margin: 5px 0;
    display: flex;
    justify-content: flex-start;
    align-content: center;
  }
}
</style>
